<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合示例</title>
    <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
        .btn {
            padding: 5px 10px;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <p class="text">原来的文字</p>
    <button class="btn">点击修改文字</button>
</div>

<script>
    // 1️⃣ 修改文字和样式
    const text = document.querySelector(".text");
    const btn = document.querySelector(".btn");

    btn.onclick = () => {
        // 修改文字内容
        text.innerHTML = "明天你好";

        // 修改样式
        text.classList.add("highlight");

        // 动态插入新元素
        const newP = document.createElement("p");
        newP.innerHTML = "我是新插入的段落！";
        newP.style.color = "green";
        document.querySelector(".container").appendChild(newP);

        // 弹窗提示
        alert("文字已修改，新段落已插入！");
    };
</script>
</body>
</html>
